<template>
	<div id="AddManage">
		<x-header :left-options="{showBack: false}" title="地址管理" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="addList">
			<img class="border_img" src="../../assets/images/home/icon_border.png" alt="" />
			<ul>
				<div v-if="count == 0"></div>
				<li v-for="item in addressList" v-else>
					<div class="left_bar">
						<p>{{item.receiver_name}}</p>
						<span v-if="item.receiver_default == 1" @click="defaultAdd(item.receiver_id)">默认</span>
						<span class="default" v-else @click="defaultAdd(item.receiver_id)">默认</span>
					</div>
					<div class="info">
						<span>{{item.receiver_tel}}</span>
						<p>{{item.receiver_province}}{{item.receiver_city}}{{item.receiver_county}}{{item.receiver_address}}</p>
					</div>
					<div class="del_bar" @click="delAddress(item.receiver_id)">
						<img src="../../assets/images/home/icon_delete.png" alt="" />
					</div>
					<confirm id="alert" v-model="show" :title="title" @on-confirm="onConfirm(item.receiver_id)">
						<p style="text-align:center;">{{content}}</p>
					</confirm>
					<router-link :to="'/AddEdit/id/' + item.receiver_id">
						<div class="right_bar">
							<img src="../../assets/images/home/icon_edit.png" alt="" />
						</div>
					</router-link>
				</li>
			</ul>
		</div>
		<router-link to="AddSite" class="add">
			<div class="addBtn">
				<span>添加新地址</span>
			</div>
		</router-link>

		<toast v-model="success" type="text" width="3.5rem">{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, Toast, Swipeout, SwipeoutItem, SwipeoutButton, Confirm } from 'vux'
	export default {
		data() {
			return {
				addressList: [],
				success: false,
				msg: '',
				count: '',
				title: '操作提示',
				content: '是否删除该地址',
				show: false,
			}
		},
		components: {
			XHeader,
			Swipeout,
			SwipeoutItem,
			Toast,
			SwipeoutButton,
			Confirm
		},
		activated() {
			this.getAddressList()
		},

		methods: {
			//获取所有地址列表信息
			getAddressList: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/receiver_list.json',
					data: ''
				}).then((result) => {
					console.log(result);
					this.addressList = result.data.list;
					this.count = result.data.count;
				}).catch((err) => {
					console.log(err);
				})
			},
			//删除地址
			onConfirm(receiver_id) {
				var params = {
					receiver_id: receiver_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/member/receiver_del.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.$nextTick(() => {
							this.getAddressList();
						}, 500)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//显示是否删除
			delAddress: function(receiver_id) {
				this.show = !this.show;
			},
			//默认地址
			defaultAdd: function(receiver_id) {
				var params = {
					receiver_id: receiver_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/member/receiver_default.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.$nextTick(() => {
							this.getAddressList();
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			back: function() {
				window.history.go(-1);
			},
			onButtonClick(type) {
				alert('on button click ' + type)
			},
			handleEvents(type) {
				console.log('event: ', type)
			}
		}
	}
</script>

<style scoped>
	#AddManage {
		height: 88%;
		overflow: auto;
	}

	.addList {
		width: 100%;
		position: relative;
		background: #fff;
	}

	.header {
		background: #fff;
	}

	.addList .border_img {
		width: 100%;
		position: absolute;
		margin-top: 0.02rem;
	}

	.addList ul {}

	li {
		height: 2.53rem;
		padding: 0.26rem;
		overflow: hidden;
		font-size: 0.37rem;
		color: #333;
		position: relative;
	}

	.addList ul li:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	.addList ul li .left_bar {
		float: left;
		padding: 0.26rem 0;
		text-align: center;
	}

	.addList ul li .left_bar span {
		border: solid 1px #da4240;
		width: 0.82rem;
		height: 0.45rem;
		line-height: 0.45rem;
		border-radius: 0.05rem;
		font-style: normal;
		font-size: 0.29rem;
		color: #da4240;
		text-align: center;
		display: block;
		margin-top: 0.32rem;
	}

	.addList ul li .left_bar .default {
		border: solid 1px #777;
		width: 0.82rem;
		height: 0.45rem;
		line-height: 0.45rem;
		border-radius: 0.05rem;
		font-style: normal;
		font-size: 0.29rem;
		color: #777;
		text-align: center;
		display: block;
		margin-top: 0.32rem;
	}

	.addList ul li .info {
		margin-left: 1.28rem;
		float: left;
		width: 5.7rem;
		padding: 0.26rem 0;
	}

	.addList ul li .info p {
		margin-top: 0.26rem;
		color: #777;
		font-size: 0.32rem;
		line-height: 0.53rem;
		height: 1.06rem;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.addList ul li .right_bar {
		position: absolute;
		display: block;
		right: 0.26rem;
		top: 0.52rem;
	}

	.addList ul li .right_bar img {
		width: 0.42rem;
		height: 0.42rem;
	}

	.addList ul li .del_bar {
		width: 0.42rem;
		height: 0.42rem;
		display: block;
		position: absolute;
		right: 0.22rem;
		bottom: 0.52rem;
	}

	.addList ul li .del_bar img {
		width: 100%;
		height: 100%;
	}

	.addBtn {
		width: 90%;
		left: 5%;
		bottom: 0.52rem;
		position: absolute;
		line-height: 1.3rem;
		background: #a30000;
		border-radius: 0.05rem;
		text-align: center;
	}

	.addBtn span {
		width: 100%;
		height: 100%;
		color: #fff;
		display: block;
		font-size: 0.4rem;
		text-align: center;
	}

	#alert .weui-dialog__btn_primary {
		color: #a3000!important;
	}

	#alert .weui-dialog__btn {
		color: #a3000!important;
	}
</style>
